<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        textarea {}
    </style>
</head>

<body>
    <nav class="navbar navbar-light bg-light">
        <span class="navbar-brand mb-0 h1">我的留言板</span>
    </nav>
    <div class="container  mt-5">

        <form>
            <div class="form-group row">
                <label for="staticEmail" class="col-sm-2 col-form-label">姓名：</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputPassword" placeholder="username">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputPassword" class="col-sm-2 col-form-label">留言内容：</label>
                <div class="col-sm-10">
                    <textarea name="" class="form-control"></textarea>
                </div>
            </div>
        </form>
        <button class="float-right">提交</button>
        <small class="float-right">还可以输入140个字</small>
        <div class="list-group mt-5">
            <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">用户名：</h5>
                </div>
                <p class="mb-1">评论内容
                </p>
                <small class="float-right">删除</small>
            </a>
            <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">用户名：</h5>
                </div>
                <p class="mb-1">评论内容
                </p>
                <small class="float-right">删除</small>
            </a>
            <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">用户名：</h5>
                </div>
                <p class="mb-1">评论内容
                </p>
                <small class="float-right">删除</small>
            </a>
        </div>
    </div>

</body>

</html>